<template>
	<view class="indexBig">
		<CommenHeader :title="'售后结果'"></CommenHeader>
		<view class="shareBox">
			<view class="stepTop">
				<view class="point"></view>
				<view class="hr"></view>
				<view class="point"></view>
				<view class="hr"></view>
        <u-icon v-if="afterSales.state == '已驳回'" name="close-circle-fill" size="62" color="#EA7130"></u-icon>
        <view v-else class="point"></view>
			</view>
			<view class="stepText">
				<view class="">提交申请</view>
				<view class="">平台审核</view>
				<view class="">售后被拒绝</view>
			</view>
		</view>
		<view class="allInfo">
			<view class="tit">售后明细</view>
			<view class="">
				<view class="">
					<view class="">售后原因</view>
					<view class="">{{afterSales.feedback}}</view>
				</view>
				<view class="">
					<view class="">售后说明</view>
					<view class="">{{afterSales.foodProblems}}</view>
				</view>
				<view class="">
					<view class="">售后凭证</view>
					<image :src="item|getImg" mode="" v-for="(item,index) in afterSales.picture" :key="index"></image>
				</view>
			</view>
		</view>
		<view class="allInfo" v-if="afterSales.state == '已驳回'">
			<view class="">您的售后申请被拒绝</view>
			<view class="">拒绝原因是：{{ afterSales.reasonRejection }}</view>
		</view>
	</view>
</template>

<script>
import { getAfterSalesByIdWithCompany } from '@/utils/req/api.js';
import CommenHeader from '@/components/header/header.vue';
export default {
	components: {
		CommenHeader
	},
	data() {
		return {
			id: '',
			afterSales: ''
		};
	},
	onLoad(options) {
		this.id = options.id;
	},
	onShow() {
		this.getAfterSalesInfo();
	},
	methods: {
		async getAfterSalesInfo() {
			let res = await getAfterSalesByIdWithCompany({
				id: this.id
			});
			this.afterSales = res.data.result;
			this.afterSales.picture = this.afterSales.picture.split(',');
		}
	}
};
</script>

<style lang="scss" scoped>
.indexBig {
	min-height: 100vh;
	background: linear-gradient(0.45deg, #f5f5f5 6.52%, #ff8739 58.65%, #fb690f 98.93%);
	background-size: 100vw 466rpx;
	background-repeat: no-repeat;
	background-color: #f5f5f5;
	padding: 40rpx 20rpx;
	padding-bottom: 150rpx;

	.shareBox {
		margin: 40rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;

		.stepTop {
			@include flexs(space-between, center);

			.point {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #fa690a;

				&:first-child {
					margin-left: 5%;
				}

				&:last-child {
					margin-right: 5%;
				}
			}

			.hr {
				width: 30%;
				height: 5rpx;
				background-color: #fa690a;
				border-radius: 20rpx;
			}

			.success {
				width: 50rpx;
				height: 50rpx;
				position: relative;

				image {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					left: 10rpx;
					top: 10rpx;
				}
			}
		}

		.stepText {
			@include flexs(space-between, center);
			font-size: 28rpx;
			line-height: 2;
			padding: 10rpx 0;
		}
	}

	.warn {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 40rpx 0;
		padding: 40rpx;
		@include flexs(space-between, center);

		> view {
			font-size: 32rpx;
			line-height: 1.5;
			flex-wrap: wrap;

			> view:nth-child(2) {
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.55);
			}

			&:nth-child(2) {
				font-weight: bold;
				color: #ff0000;
				font-size: 36rpx;
			}
		}
	}

	.allInfo {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 40rpx 0;
		padding: 32rpx;
		color: rgba(0, 0, 0, 0.55);
		font-size: 24rpx;
		line-height: 2;

		> view {
			&:nth-child(1) {
				font-size: 28rpx;
				line-height: 2;
				color: #000;
			}

			> view {
				padding: 10rpx 0;
				@include flexs();
				line-height: 1.5;

				&:last-child {
					@include flexs(flex-start, flex-start);
				}

				> view:nth-child(1) {
					width: 25%;
				}

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
}
</style>
